<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="grid-cont1 bg-purple">
                    <div class="tit">领取列表</div>
                    <div v-if="state.AllmeetName.length > 0">

                        <div class="userlist" v-for="(it1,idx1) in state.detail.AllmeetName" :key="idx1">
                            <div class="av-img">
                                <img
                                        :src="it1.meetAvatar"
                                        class="img1"
                                />
                            </div>
                            <div class="nick">
                                <div class="realname">{{it1.meetName}}</div>
                                <div class="date">{{it1.getTime}}</div>
                            </div>
                        </div>

                    </div>
                    <div class="list-none" v-else>
                        <div class="list-img">
                            <img
                                    src="~@/assets/list/list-none.png"
                                    class="l-img"
                            />
                        </div>
                        <div class="l-str">暂时还没有人接单哦~</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="20">
                <div class="grid-content bg-purple">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <div class="grid-content3 bg-purple-light">
                                <div class="d-fixs">
                                    <img
                                            :src="state.detail.pushAvatar"
                                            class="img1"
                                    />
                                    <div class="matop">
                                        <img
                                                src="~@/assets/list/person.png"
                                                class="u-img"
                                        />
                                        <div class="n1">{{state.detail.pushName}}</div>
                                    </div>
                                </div>
                                <div class="title1">{{state.detail.title}}</div>
                                <div class="desc1">
                                    <div class="name">简介</div>
                                    <div class="str">
                                        {{state.detail.synopsis}}
                                    </div>
                                </div>
                                <div class="desc1 mtop">
                                    <div class="name">要求</div>
                                    <div class="str" v-html="state.detail.data"></div>
                                </div>

                                <div class="title1">参考资料</div>
                                <div class="ck-desc" v-if="state.detail.about_file.length > 0">
                                    <div class="file-img" v-for="(itv2,inde1) in state.detail.about_file" :key="inde1" >
                                        <div class="docx-img">
                                            <img
                                                    src="~@/assets/list/docx.png"
                                                    class="yes-img"
                                            />
                                        </div>
                                        <div class="ma-lrft">
                                            <div class="tit">{{itv2.title}}</div>
                                            <div class="bottom">
                                                <div class="butt1" @click="previewFile(itv2)">预览</div>
                                                <div class="butt2" @click="downloadFile(itv2.url)">下载</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-else class="ckzl">
                                    暂无参考资料
                                </div>

                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content4 bg-purple3">
                                <div class="title">操作面板</div>
                                <div class="panel" v-if="state.detail.is_self==1 && state.detail.recStatus == 1 && state.detail.is_del == 0">
                                    <div class="panelBox">
                                        <div class="item">
                                            <el-upload
                                                    class="upload-demo"
                                                    action="https://inter.huanxingbi.cn/?s=Learn.Admin.Update_file"
                                                    :on-success="handleSuccess"
                                                    :headers="state.headers"
                                                    :data="state.dataForm"
                                                    :on-remove="remove"
                                                    :file-list="state.fileList">
                                                <div style="display:block;">
                                                    <img src="@/assets/img/uploadIcon.png" class="img">
                                                    <p>上传文件</p>
                                                </div>
                                            </el-upload>
                                        </div>
                                        <div class="dfx-btttom">
                                            <div class="dfix1 bg1"  v-if="state.detail.recStatus!= 2" @click="submitClick">
                                                <img src="@/assets/img/submitIcon.png" class="add-img">
                                                <div class="tj">提交任务</div>
                                            </div>
                                            <div class="dfix1 bg2" @click="abandonClick">
                                                <img src="@/assets/img/abandonIcon.png" class="add-img">
                                                <div class="tj">放弃任务</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-else>
                                    <div class="op">
                                        <img
                                                src="~@/assets/list/operation.png"
                                                class="oper-img"
                                        />
                                    </div>
                                    <div class="lq">
                                        <span class="l-butt" v-if="state.detail.recStatus == 1 && state.detail.is_del == 0">领取任务</span>
                                        <span v-if="state.detail.is_del == 3" style="color:red;">任务已结束</span>
                                    </div>
                                </div>
                            </div>
                            <div class="title">完成文件</div>
                            <div class="desc">
                                <div class="file-img" v-for="(itv1,inde1) in state.detail.finish_file" :key="inde1">
                                    <div class="docx-img">
                                        <img
                                                src="~@/assets/list/docx.png"
                                                class="yes-img"
                                        />
                                    </div>
                                    <div class="ma-lrft">
                                        <div class="tit">{{itv1.title}}</div>
                                        <div class="bottom">
                                            <div class="butt1" @click="previewFile(itv1)">预览</div>
                                            <div class="butt2" @click="downloadFile(itv1.url)">下载</div>
                                            <div class="butt3" @click="deldFile(itv1.id)">删除</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import { reactive, toRefs, ref, onMounted, getCurrentInstance } from "vue";
    import { getTaskDetail, giveupTask, getdelFile } from "@/request/api";
    import {useRouter} from "vue-router";
    import {ElMessage, ElMessageBox} from 'element-plus'
    const state = reactive({
        detail: {
            about_file: [],
            finish_file: []
        },
        AllmeetName: [],
        supportList: ['.docx','.pptx','.doc','.xlsx'],
        dataForm: {
            rec_id: 0
        },
        headers: {
            token: localStorage.getItem("token")
        },
        rec_id: 0,
        id: 0
    })
    export default {
        props: {},
        emits: [],
        setup(props,emit) {
            const router = useRouter();
            const { proxy } = getCurrentInstance()
            const init = () => {
                let id = proxy.$root.$route.query.id
                let rec_id = proxy.$root.$route.query.rec_id
                state.rec_id = rec_id
                state.id = id
                state.dataForm.rec_id = rec_id
                let param = {
                    task_id: id,
                    rec_id: rec_id
                }
                getTaskDetail(param).then(res => {
                    state.detail = res.data;
                    state.AllmeetName = state.detail.AllmeetName
                })
            }
            //预览文件
            const previewFile = (item) => {
                if (state.supportList.indexOf(item.imagetype) == -1) {
                    ElMessage.error('该文件格式不支持在线预览');
                    setTimeout(function () {
                        window.open(item.url)
                    },1000)
                } else {
                    let file = item.url
                    window.open('http://view.officeapps.live.com/op/view.aspx?src=' + escape(file))
                }
            }
            //下载文件
            const downloadFile = (file) => {
                if (file == '') {
                    ElMessage.error('文件不存在');
                } else {
                    window.open(file)
                }
            }

            //删除
            const remove = () => {

            }

            //成功
            const handleSuccess = (res) => {
                if(res.data.code === 1){
                    state.attc_id = res.data.attc_id
                    //重置数据
                    init();
                }else{
                    ElMessage.error('上传失败，请刷新页面重试');
                }
            }

            //提交任务
            const submitClick = () => {
                if(state.detail.finish_file.length <= 0){
                    ElMessage.error('请先上传完成文件在提交');
                }
                //提交
                let params =  {task_id:state.rec_id,status: 2}
                giveupTask(params).then((res) => {
                    if(res.ret === 200){
                        ElMessage.success({
                            message: '提交成功，请等待审核',
                            type: 'success'
                        })
                        setTimeout(function () {
                            init();
                        },1000)
                    }else{
                        ElMessage.error(res.msg);
                    }
                })
            }

            //删除文件
            const deldFile = (id) => {
                if(state.detail.recStatus!=1){
                    ElMessage.error('该任务已提交，不能在删除该哦');
                    return false
                }
                ElMessageBox.confirm(
                    '确定要删除该文件吗?删除后无法恢复哦',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                    let params =  {attc_id:id}
                    getdelFile(params).then((res) => {
                        if(res.ret == 200){
                            ElMessage({
                                type: 'success',
                                message: '操作成功',
                            })
                            init();
                        }else{
                            ElMessage.error(res.msg);
                        }
                    })

                }).catch(() => {
                    _this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }

            //放弃任务
            const abandonClick = () => {
                ElMessageBox.confirm(
                    '确定要放弃该任务吗?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        let param = {
                            task_id: state.rec_id,
                            status: 3
                        }
                        giveupTask(param).then(res => {
                            if(res.ret === 200){
                                ElMessage({
                                    type: 'success',
                                    message: '操作成功',
                                })
                                init();
                            }else{
                                ElMessage({
                                    type: 'error',
                                    message: res.msg,
                                })
                            }
                        })
                    })
                    .catch(() => {
                    })
            }

            onMounted(async () => {
                await init()
            })
            return {
                state,
                downloadFile,
                previewFile,
                remove,
                handleSuccess,
                abandonClick,
                submitClick,
                deldFile

            };
        }
    };
</script>

<style>
    .el-page-header__content {
        font-size: 14px !important;
        color: #5587ea;
    }
    .el-page-header {
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        background: #d7e4ff;
        padding: 5px;
    }
</style>
<style lang="scss" scoped>

    .el-divider--horizontal {
        display: block;
        height: 1px;
        width: 100%;
        margin: 0;
    }
    .grid-cont1 {
        background: #eff3fb;
        padding: 25px;
        .tit {
            color: #45484d;
            font-weight: bold;
            font-family: PingFang SC;
            margin-bottom: 25px;
            text-align: center;
        }
        .userlist {
            display: flex;
            border-bottom: 1px solid #dce4f5;
            padding-bottom: 10px;
            padding-top: 10px;
            justify-content: center;
            .av-img {
                margin-right: 10px;
            }
            .realname {
                color: #45484d;
                margin-top: 5px;
                font-size: 15px;
            }
            .date {
                font-size: 13px;
                color: #8a9099;
                margin-top: 5px;
            }
        }
    }

    .grid-content {
        background: white;
        min-height: 400px;
        border-radius: 18px 0 0 18px;
    }
    .grid-content3 {
        padding: 40px;
        min-height: 700px;
        border-right: 1px solid #e1e4eb;
    }
    .img1 {
        width: 45px;
        height: 45px;
        border-radius: 50%;
    }
    .d-fixs {
        display: flex;
    }
    .u-img {
        width: 18px;
        height: 18px;
    }
    .matop {
        display: flex;
        margin-top: 12px;
        margin-left: 12px;
    }
    .n1 {
        font-size: 16px;
        margin-left: 4px;
        color: #8a9099;
    }
    .title {
        margin-top: 25px;
        margin-bottom: 20px;
        color: #45484d;
        font-weight: bold;
        font-size: 15px;
        padding-left: 20px;
    }
    .title1 {
        margin-top: 25px;
        margin-bottom: 20px;
        color: #45484d;
        font-weight: bold;
        font-size: 17px;
    }
    .name {
        color: #7fa8fa;
        margin-bottom: 10px;
    }
    .str {
        color: #8a9099;
        line-height: 20px;
        font-size: 14px;
    }
    .mtop {
        margin-top: 50px;
    }
    .file-img {
        display: flex;
        margin-bottom: 40px;
    }
    .bottom {
        display: flex;
        .butt1 {
            background: #6c91ed;
            color: white;
            font-size: 10px;
            padding: 5px;
            border-radius: 5px;
            margin-right: 5px;
            cursor: pointer;
        }

        .butt2 {
            background: #fb8b79;
            color: white;
            font-size: 10px;
            padding: 5px;
            border-radius: 5px;
            cursor: pointer;
        }

        .butt3 {
            background: #131111;
            color: white;
            font-size: 10px;
            padding: 5px;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 5px;
        }
    }
    .op {
        text-align: center;
        .oper-img {
            width: 239px;
            height: 190px;
        }
    }
    .lq {
        text-align: center;
        margin-top: 20px;
    }
    .l-butt {
        background: #6c91ed;
        color: #fff33b;
        font-size: 12px;
        padding: 8px;
        border-radius: 5px;
        cursor: pointer;
    }
    .l-butt:active {
        background: #a3b4de;
    }
    .is-guttered {
        padding: 0 !important;
    }
    .bg-purple3 {
        border-bottom: 1px solid #e1e4eb;
        padding-bottom: 60px;
    }
    .desc {
        width: 91%;
        margin: auto;
    }
    .ck-desc {
        margin: auto;
    }
    .tit {
        font-size: 14px;
        margin-bottom: 5px;
    }
    .ma-lrft {
        margin-left: 5px;
    }
    .yes-img {
        width: 45px;
        height: 45px;
    }
    .l-img {
        width: 200px;
    }
    .list-none {
        text-align: center;
        margin-top: 30px;
    }
    .l-str {
        margin-top: 15px;
        color: #929496;
        font-size: 15px;
    }
    .ckzl {
        font-size: 13px;
    }
    .panel{
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(100% - 55px);
        .panelBox{
            display: flex;
            flex-wrap: wrap;
            width: 60%;
            .fix {
                flex: 33% !important;
            }
            .item{
                flex: 100%;
                display: grid;
                place-items: center;
                cursor: pointer;
                margin-bottom: 10px;
                margin-top: 20px;
                .img{
                    width: 56px;
                    height: 56px;
                }
                p{
                    color: #00000073;
                    font-size: 14px;
                }
            }
        }
    }
    .add-img {
        width: 26px;
        height: 26px;
    }
    .dfix1 {
        display: flex;
        width: 35%;
    }
    .tj {
        line-height: 25px;
        font-size: 13px;
    }
    .bg1 {
        background: #F4F1FD;
        padding: 5px 5px 5px 20px;
        color: #6B60DD;
        border-radius: 35px;
    }
    .bg2 {
        background: #F4EBF6;
        padding: 5px 5px 5px 20px;
        cursor:pointer;
        color: #F72A66;
        border-radius: 35px;
    }
    .tj:active {
        color: red;
    }

    .dfx-btttom {
        width: 100%;
        cursor:pointer;
        display: flex;
        justify-content: space-between;
    }
</style>
